---
permalink: "/ui/ui-elements/forms/select-single/index.xml"
tags: "UI/UI Elements/Forms"
hv_title: "Select Single"
hv_button_behavior: "back"
---
{% extends 'templates/scrollview.xml.njk' %}
{% from 'macros/description/index.xml.njk' import description %}

{% block styles %}
  <style id="description" fontSize="16" fontWeight="600" margin="24"/>
  <style
    id="select-custom"
    flex="1"
    flexDirection="row"
    marginBottom="40"
    marginLeft="24"
    marginRight="24"
    marginTop="24"/>
  <style id="select-custom-image-selected" height="0" width="0">
    <modifier selected="true">
    <style height="32" width="32"/>
    </modifier>
  </style>
  <style id="select-custom-image-unselected">
    <modifier selected="true">
    <style height="0" width="0"/>
    </modifier>
  </style>
  <style
    id="select-custom-option"
    alignItems="center"
    borderColor="#BDC4C4"
    borderRadius="4"
    borderWidth="1"
    flex="1"
    justifyContent="flex-start"
    marginRight="8"
    padding="16">
    <modifier selected="true">
    <style borderColor="#4778FF"/>
    </modifier>
  </style>
  <style id="select-radio-outer" borderColor="#bdc4c4" borderRadius="10" borderWidth="1" height="20" width="20">
    <modifier pressed="true">
    <style borderColor="#8d9494" borderWidth="1"/>
    </modifier>
    <modifier selected="true">
    <style borderColor="#4778ff" borderWidth="2"/>
    </modifier>
  </style>
  <style id="select" marginTop="24"/>
  <style id="select-custom-label" color="#4e4d4d" fontSize="16" fontWeight="normal" lineHeight="18" textAlign="center">
    <modifier selected="true">
    <style color="#4778FF" fontWeight="500"/>
    </modifier>
  </style>
  <style id="select-separator" borderTopColor="#e1e3e3" borderTopWidth="1" marginLeft="24" marginRight="24"/>
  <style id="select-radio-inner" borderRadius="5" height="10" marginLeft="3" marginTop="3" opacity="0" width="10">
    <modifier selected="true">
    <style backgroundColor="#4778ff" opacity="1"/>
    </modifier>
  </style>
  <style id="select-custom-image" height="32" left="0" position="absolute" top="0" width="32"/>
  <style id="select-custom-image-wrapper" height="32" marginBottom="8" width="32"/>
  <style
    id="Select__Option"
    alignItems="center"
    flex="1"
    flexDirection="row"
    justifyContent="space-between"
    paddingBottom="16"
    paddingLeft="24"
    paddingRight="24"
    paddingTop="16"/>
  <style id="select-label" color="#4e4d4d" fontSize="16" fontWeight="normal" lineHeight="18">
    <modifier selected="true">
    <style color="#312f2f"/>
    </modifier>
    <modifier pressed="true">
    <style color="#312f2f"/>
    </modifier>
  </style>
{% endblock %}

{% block content %}
  {% include './_form.xml.njk' %}
{% endblock %}
